<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>table</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: rgb(0, 0, 0);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .container{
        padding-top: 150px;
        width: 70%;
        font-size: 18px;
        color: aliceblue;
        line-height: 2;
        position: relative;
      }
      .eraser{
        position: absolute;
        left: 0;
        top: 150px;
      }
      .text{
        background: linear-gradient(to right, #0000 var(--p),#000 calc(var(--p) + 100px));
        color: transparent;
        animation:  eraser 8s forwards;
      }
      @property --p{
        syntax:'<percentage>';
        initial-value: 0%;
        inherits: false;
      }
      @keyframes eraser{
        to{
            --p:100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Odit maxime aliquid fugiat pariatur laboriosam quia eveniet ab consequatur architecto officiis. 
            Quibusdam cupiditate, voluptas aliquam ab nostrum nobis veritatis quaerat quod?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, fuga dolore cumque voluptates voluptatum,
            cum iste repudiandae minima vel modi, dolor tenetur neque nobis! Id animi obcaecati sequi. Magnam, dolorem!
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem quis vitae ipsam esse praesentium asperiores 
            dignissimos accusantium libero, fuga, quidem commodi maiores sit cupiditate, saepe quisquam suscipit
            inventore repellat cum. 'calc(var(--p) + 100px))' 这里有个小坑，表达式中有“+”和“-”时，其前后必须要有空格，如”calc(var(--p)+100px))”
            这种没有空格的写法是错误的；表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
        </p>
        <p class="eraser">
            <span class="text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Odit maxime aliquid fugiat pariatur laboriosam quia eveniet ab consequatur architecto officiis. 
                Quibusdam cupiditate, voluptas aliquam ab nostrum nobis veritatis quaerat quod?
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, fuga dolore cumque voluptates voluptatum,
                cum iste repudiandae minima vel modi, dolor tenetur neque nobis! Id animi obcaecati sequi. Magnam, dolorem!
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem quis vitae ipsam esse praesentium asperiores 
                dignissimos accusantium libero, fuga, quidem commodi maiores sit cupiditate, saepe quisquam suscipit
                inventore repellat cum.'calc(var(--p) + 100px))' 这里有个小坑，表达式中有“+”和“-”时，其前后必须要有空格，如”calc(var(--p)+100px))”
                这种没有空格的写法是错误的；表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
            </span> 
        </p>
    </div>
  </body>
</html>